<template>
	<view class="zh-service-purchage">
		<view class="banner">
			<text class="title">代理采购业务</text>
			<image :src="IMG_URL + '/service/purchase/banner.png'"/>
		</view>
		<view class="flow">
			<view class="title">
				<text>服务流程</text>
			</view>
			<view class="content mt-40 display-flex justify-between align-center">
				<view class="item">
					<image :src="IMG_URL + '/service/purchase/1.png'"/>
				</view>
				<image src="@/static/icons/right_arrow_light.png" class="arrow-right"/>
				<view class="item">
					<image :src="IMG_URL + '/service/purchase/2.png'"/>
				</view>
				<image src="@/static/icons/right_arrow_light.png" class="arrow-right"/>
				<view class="item">
					<image :src="IMG_URL + '/service/purchase/3.png'"/>
				</view>
				<image src="@/static/icons/right_arrow_light.png" class="arrow-right"/>
				<view class="item">
					<image :src="IMG_URL + '/service/purchase/4.png'"/>
				</view>
				<image src="@/static/icons/right_arrow_light.png" class="arrow-right"/>
				<view class="item">
					<image :src="IMG_URL + '/service/purchase/5.png'"/>
				</view>
			</view>	
			<view class="content display-flex justify-between">
				<view class="item">
					<text>提交申请</text>
				</view>
				<view class="item">
					<text>资质审核</text>
				</view>
				<view class="item">
					<text>签订协议</text>
				</view>
				<view class="item">
					<text>平台采购</text>
				</view>
				<view class="item">
					<text>货权交割</text>
				</view>
			</view>
		</view>
		<view class="advantage">
			<view class="title">
				<text>我们的优势</text>
			</view>
			<view class="content display-flex justify-between">
				<view class="item">
					<image :src="IMG_URL + '/service/purchase/you_1.png'"/>
					<text class="des1">实力央企</text>
					<text class="des2">优质服务</text>
				</view>
				<view class="item">
					<image :src="IMG_URL + '/service/purchase/you_2.png'"/>
					<text class="des1">资源丰富</text>
					<text class="des2">高效匹配</text>
				</view>
				<view class="item">
					<image :src="IMG_URL + '/service/purchase/you_3.png'"/>
					<text class="des1">在线操作</text>
					<text class="des2">全程可视化</text>
				</view>
			</view>
		</view>
		<view class="business-btn" @click="openServiceLink">
			<button class="btn">业务洽谈</button>
		</view>
		<view class="explain">
			<view class="title">
				<image :src="IMG_URL + '/service/purchase/line-right.png'" class="line-left"/>
				<image :src="IMG_URL + '/service/purchase/line-right.png'" class="line-right"/>
				<text>代理采购业务</text>
			</view>
			<view class="content">
				<text>中恒e纺为纺企外贸业务提供安全快捷的一站式通关、外汇、退税以及配套的物流、供应链服务，快速解决企业全环节贸易服务难题！</text>
			</view>
		</view>
		<service-link :show="showServiceLink" @close="changeServiceLink" @link="linkService" @save="saveService"></service-link>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { tip } from '@/utils'
	import { onHide, onShareAppMessage } from '@dcloudio/uni-app'
	import serviceLink from '@/pages/components/service-link'
	
	import { IMG_URL } from '@/utils/constant'
	const showServiceLink = ref(false)
	
	onShareAppMessage(() => {})
	
	onHide(() => {
		showServiceLink.value = false
	})
	
	const openServiceLink = () => {
		changeServiceLink()
	}
	
	const changeServiceLink = () => {
		showServiceLink.value = !showServiceLink.value
	}
	
	const linkService = () => {
		uni.makePhoneCall({
			phoneNumber:"0757-82138330",
			success:() => {
				console.log('拨打电话成功')
			},
			fail:() => {
				
			}
		})
	}
	
	const saveService = () => {
		tip.showToast('已保存，请用微信扫码加好友')
	}
</script>

<style>
	page {
		background-color: #E0EFFF;
	}
</style>
<style lang="scss" scoped>
	.zh-service-purchage {
		.banner {
			text-align: center;
			padding-top:50rpx;
			.title {
				font-size:64rpx;
				font-weight: bold;
				text-align: center;
			}
			image  {
				width:671rpx;
				height:320rpx;
				text-align: center;
				margin-top: 25rpx;
			}
		}
		.flow {
			background-color: #fff;
			padding:35rpx 38rpx 60rpx; 
			margin:14rpx 24rpx;
			border-radius: 24rpx;
			.title {
				text-align: center;
				font-size:36rpx;
				font-weight: bold;
				position:relative;
				text {
					position:relative;
				}
				&::before {
					content:'';
					position:absolute;
					left:50%;
					right:0;
					bottom:-8rpx;
					transform:translateX(-50%);
					width: 296rpx;
					height: 20rpx;
					background: linear-gradient(268deg, rgba(255,228,186,0), #FFE4BA, rgba(255,228,186,0));
					border-radius: 10rpx;
				}
			}
			.content {
				.item {
					image {
						width:96rpx;
						height:96rpx;
					}
					text {
						font-size:26rpx;
						font-weight: bold;
						display:block;
					}
				}
				.arrow-right {
					width:12rpx;
					height: 22rpx;
				}
			}
		}
		.advantage {
			background-color: #fff;
			padding:35rpx 0rpx 60rpx; 
			margin:14rpx 24rpx;
			border-radius: 24rpx;
			.title {
				text-align: center;
				font-size:36rpx;
				font-weight: bold;
				position:relative;
				text {
					position:relative;
				}
				&::before {
					content:'';
					position:absolute;
					left:50%;
					right:0;
					bottom:-8rpx;
					transform:translateX(-50%);
					width: 296rpx;
					height: 20rpx;
					background: linear-gradient(268deg, rgba(255,228,186,0), #FFE4BA, rgba(255,228,186,0));
					border-radius: 10rpx;
				}
			}
			.content {
				margin:64rpx 75rpx 0;
				.item {
					text-align: center;
					image {
						width:92rpx;
						height: 92rpx;
					}
					.des1 {
						font-size:32rpx;
						font-weight: bold;
						color:#333;
						display: block;
						margin-top: 23rpx;
					}
					.des2 {
						font-size:24rpx;
						color:#868894;
						display:block;
						margin-top: 20rpx;
					}
				}
			}
		}
		.business-btn {
			margin:42rpx auto 0 ;
			.btn {
				width: 670rpx;
				height: 112rpx;
				line-height: 112rpx;
				background: linear-gradient(268deg, #57CAFA, #3D8EFC);
				border-radius: 16rpx;
				color:#fff;
				text-align:center;
				font-size:36rpx;
			}
		}
		.explain {
			padding-bottom:80rpx;
			margin-top:70rpx;
			.title {
				font-size: 26rpx;
				color:#767B81;
				text-align: center;
				position:relative;
				.line-left {
					position:absolute;
					width: 211rpx;
					height: 9rpx;
					left:60rpx;
					top:15rpx;
					transform: rotate(180deg);
				}
				.line-right {
					position:absolute;
					width: 211rpx;
					height: 9rpx;
					right:60rpx;
					top:15rpx;
				}
			}
			.content {
				font-size:24rpx;
				color:#767B81;
				margin:44rpx 42rpx 0;
			}
		}
	}
</style>
